<template>
  <div class="app-container">
    <el-row class="toolbar">
      <el-col :span="24">
        <el-button type="primary" @click="addDialogVisible=true"   v-if="hasPermission('system:devicetype:add')">创建类型</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="list" element-loading-text="Loading" fit highlight-current-row>
          <el-table-column label='序号' width="95" type="index">
          </el-table-column>
          <el-table-column label="类型名称" prop="name">
          </el-table-column>
          <el-table-column label="端口" prop="port">
          </el-table-column>
          <el-table-column label="描述" prop="description">
          </el-table-column>
          <el-table-column label="禁用">
            <template slot-scope="scope">
              <el-switch disabled v-model="scope.row.disabled" active-color="#ff4949"  inactive-color="#13ce66"> </el-switch>

            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="handleEdit(scope.row)" v-if="hasPermission('system:devicetype:update')">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)" v-if="hasPermission('system:devicetype:delete')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <el-dialog
    title="创建设备类型"
    :visible.sync="addDialogVisible"
    width="30%"
    >
    <el-form :model="addForm" ref="addValidateForm" label-width="100px" class="demo-ruleForm">
      <el-form-item  label="类型名称"  prop="name"  :rules="[{ required: true, message: '名称不能为空'}]">
        <el-input v-model="addForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item  label="端口"  prop="port" :rules="[{ required: true, message: '端口不能为空'}, { type: 'number', message: '端口必须为数字值'}]">
        <el-input v-model.number="addForm.port" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item  label="描述"  prop="description" >
        <el-input type="textarea" :rows="2" placeholder="请输入描述" v-model="addForm.description" auto-complete="off"></el-input>
      </el-form-item>
     <el-form-item label="禁用" prop="disabled">
       <el-switch
       v-model="addForm.disabled"
       active-color="#ff4949"
       inactive-color="#13ce66"
       active-text="是"
       inactive-text="否"
       >
     </el-switch>
    </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addSubmit">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
  title="修改设备类型"
  :visible.sync="editDialogVisible"
  width="30%"
  >
  <el-form :model="editForm" ref="editValidateForm" label-width="100px" class="demo-ruleForm">
      <el-form-item  label="类型名称"  prop="name"  :rules="[{ required: true, message: '名称不能为空'}]">
        <el-input v-model="editForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item  label="端口"  prop="port":rules="[{ required: true, message: '端口不能为空'}, { type: 'number', message: '端口必须为数字值'}]">
        <el-input v-model.number="editForm.port" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item  label="描述"  prop="description" >
        <el-input type="textarea" :rows="2" placeholder="请输入描述" v-model="editForm.description" auto-complete="off"></el-input>
      </el-form-item>
     <el-form-item label="禁用" prop="disabled">
       <el-switch
       v-model="editForm.disabled"
       active-color="#ff4949"
       inactive-color="#13ce66"
       active-text="是"
       inactive-text="否"
       >
     </el-switch>
    </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmit">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import util from '@/utils/util'
import { getDeviceTypes,deleteDeviceType,addDeviceType,updateDeviceType } from '@/api/api'

export default {
  data() {
    return {
      list:[],
      addDialogVisible:false,
      editDialogVisible:false,
      addForm:{
      },
      editForm:{}

    }

  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getDeviceTypes().then(data => {
        this.list = data
      })
    },
    handleDelete(row){
      deleteDeviceType(row.id).then(data => {
        this.init()
      })
    },
    handleEdit(row){
      this.editForm=row;
      this.editDialogVisible=true;
    },
    addSubmit(){
      this.$refs.addValidateForm.validate((valid) => {
        if (valid) {
          addDeviceType(this.addForm).then(data => {
                this.addDialogVisible=false;
                this.init();
          })
        }else{
           return false;
        }
      });
    },
    editSubmit(){
        this.editDialogVisible=false;
        console.log(this.editForm);
        updateDeviceType(this.editForm).then(data => {
          this.init()
       })
    },

  }
}
</script>
